<template>
  <div class="box">
    <van-cell-group>
      <div class="field_one">
        <van-field
          label="受赞赏人"
          placeholder="请选择赞赏人"
          v-model="personnel"
        >
        </van-field>
      </div>

    </van-cell-group>
    <van-cell-group>
      <van-field
        center
        clearable
        v-model="number"
        label="赠送数量"
        :placeholder="'请输入赞赏福分(可用'+arr_num+'福分)'"
      >
      </van-field>
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="message"
        rows="5"
        :style="{borderTop:'1px solid silver',borderBottom:'1px solid silver'}"
        label="写下对她(他)的祝福"
        type="textarea"
        maxlength="200"
        show-word-limit
      />
    </van-cell-group>
    <van-button
      round
      @click="showSuccess"
      :style="{width:'95%',height:'5.5vh',lineHeight:'5.5vh',position:'fixed',left:'10px',bottom:'15px',zIndex:'1px'}"
      color="#3C9BFB"
    >赞赏</van-button>
  </div>
</template>

<script type="text/javascript">
import { Cell, CellGroup } from "vant";
import { Field } from "vant";
import { Picker } from "vant";
import { Popup } from "vant";
import { Button } from "vant";

export default {
  data() {
    return {
      message: "",
      value: "",
      showPicker: false,
      id: 0,
      arr: [],
      arr_num: 0,
      personnel: "",
      number: ""
    };
  },
  components: {
    [Field.name]: Field,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button
  },
  created() {
    this.id = this.$route.query.dd_id;
    (this.personnel = this.$route.query.dd_name),
      (this.userId_p = localStorage.getItem("userId"));
    this.corpId_p = localStorage.getItem("custid");
    this.getAppreciateSet();
  },
  methods: {
    // 赞赏
    async showSuccess() {
      const val = this.message;
      const num = this.number;
      if (this.event_id == undefined) {
        this.event_id = "";
      }
      const {
        data: { balance, quota_c, quota_max_c }
      } = this.arr;
      if (Number(balance) >= Number(num)) {
        if (Number(quota_c) <= Number(num)) {
          if (Number(quota_max_c) >= Number(num)) {
            const res = await this.$http.get(
              `/yuepoints/sendPraise?corpId=${this.corpId_p}&userId=${this.userId_p}&praisedPerson=${this.id}&desc=${val}&taggingLabel=${val}&balance=${num}&type=0`
            );
            if (res.data.errcode == "0000") {
              // this.$router.replace("/home");
              this.$router.push({
                //核心语句
                path: "/home", //跳转的路径
                query: {
                  //路由传参时push和query搭配使用 ，作用时传递参数
                  active: 1
                }
              });
            } else {
              this.$toast(res.data.errmsg);
            }
          } else {
            this.$toast("不能超出福分" + quota_max_c);
          }
        } else {
          this.$toast("福分不能低于" + quota_c);
        }
      } else {
        this.$toast("超出可用福分");
      }
    },
    // 默认展示数据
    async getAppreciateSet() {
      const request = await this.$http.get(
        `/yuepoints/getAppreciateSet?corpId=${this.corpId_p}&userId=${this.userId_p}`
      );
      this.arr = request.data;
      this.arr_num = request.data.data.balance;
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  .field_one {
    /deep/ input::-webkit-input-placeholder {
      color: #000;
    }
  }
}
</style>
